<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>玉树临风美少年，揽镜自顾夜不眠 </title>
</head>

<body>
  <script src="./index.js"></script>
  <script type="text/javascript">
    const proxyUser1 = shallowReactive({
      name: '小明',
      car: {
        color: 'red'
      }
    })
    // 拦截到了读和写的数据
    // proxyUser1.name +='=='
    // 拦截到了读取数据,但是拦截不到写的数据
    // proxyUser1.car.color+'=='
    // 拦截到了删除数据
    // delete proxyUser1.name
    // 只拦截到了读,但是拦截不到删除
    // delete proxyUser1.car.color

    const proxyUser2 = reactive({
      name: '小明',
      car: {
        color: 'red'
      }
    })
    // 拦截到了读和修改的数据
    //  proxyUser2.name += '=='
    // 拦截到了读和修改的数据
    // proxyUser2.car.color = '=='
    // 拦截了删除
    // delete proxyUser2.name
    // 拦截到了读和拦截到了删除
    // delete proxyUser2.car.color



    // ==========================
    // 测试shallowReadonly和readonly
    const proxyUser3 = shallowReadonly({
      name: '小明',
      cars: ['奔驰', '宝马']
    })
    // 可以读取
    // console.log(proxyUser3.name)
    // 不能修改
    // proxyUser3.name = '=='
    // 不能删除
    // delete proxyUser3.name
    // 拦截到了读取,可以修改
    // proxyUser3.cars[0]='奥迪'
    // 拦截到了读取,可以删除
    // delete proxyUser3.cars[0]

    const proxyUser4 = readonly({
      name: '小明',
      cars: ['奔驰', '宝马']
    })
    // 拦截到了读取
    // console.log(proxyUser4.name)
    // console.log(proxyUser4.cars[0])
    // 只读的
    // proxyUser4.name='哈哈'
    // 只读的
    // proxyUser4.cars[0]='哈哈'
    // delete proxyUser4.name
    // delete proxyUser4.cars[0]

    const ref1 = shallowRef({
      name: '小明',
      car: {
        color: 'red'
      }
    })
    // console.log(ref1.value)
    // 劫持到
    // ref1.value ='=='
    // 劫持不到
    // ref1.value.car='=='

    const ref2 = ref({
      name: '小明',
      car: {
        color: 'red'
      }
    })
    // console.log(ref2.value)
    // 劫持到
    // ref2.value ='=='
    // 劫持到
    // ref2.value.car ='=='



    console.log(isRef(ref({})))
    console.log(isReactive(reactive({})))
    console.log(isReadonly(readonly({})))
    console.log(isProxy(reactive({})))
    console.log(isProxy(readonly({})))
  </script>
</body>

</html>